*{padding: 0; margin: 0;}
.box{
	width:100%;
	height:100%;
	position: absolute;
	top:0;
	left:0;
	display: flex;
	justify-content:center;
	align-items: center;
}
.tp{
	  width: 600px;
	  height: 600px;
	  float: left;
	  overflow: hidden;
	  border-radius: 5px;
}
.dengl{
	width: 600px;
	height: 600px;
	float: left;
	background: rgba(255, 255, 255, 0.2);
	box-shadow: rgba(168, 168, 168, 0.2) 20px 20px 20px;
	border-radius: 5px;
}
.title{
	width: 500px;
	/* margin-left: 170px; */
	margin-top: 100px;
	margin-left: 50px;
	text-align: center;
	
}
.srg{
	width: 380px;
	height: 40px;
	border-radius: 5px;
	font-size: 18px;
	margin-top: 20px;
	border: none;
	background: rgba(216, 216, 216, 0.3);
	/* text-align: left; */
	text-indent:2em
}
.srgs{
	width: 180px;
	height: 40px;
	border-radius: 5px;
	font-size: 18px;
	margin-top: 20px;
	border: none;
	background: rgba(216, 216, 216, 0.3);
	/* text-align: left; */
	text-indent:2em
}
.zhuc{
	width: 480px;
	height: 60px;
	margin: 40px -350px;
	float: left;
	
	}
	.zh{
		width: 100px;
		height: 160px;
		margin-left: 50px;
	}
.qd{
	width: 140px;
	height: 40px;
	margin: -86px 120px;
	background-color: #50ffe2;
	border: none;
	color: #ffffff;
	border-radius: 15px;
}
.tiaozhuan{
	margin-left: 300px;
	font-size: 18px;
	
}
.yzm{
	background-color: #d6d6d6;
	margin-top: 27px;
	margin-left: -110px;
	height: 24px;
	position: absolute;
}
.a1{
	color: #c1c1c1;
}
.y{
	width: 300px;
	margin-top: 25px;
	margin-left: 20px;
	color: #00aaff;
}
.cbx {
 -webkit-perspective: 20;
 perspective: 20;
 position: absolute;
 top: 50%;
 left: 50%;
 margin: -12px;
 border: 2px solid #e8e8eb;
 background: #e8e8eb;
 border-radius: 4px;
 transform: translate3d(0, 0, 0);
 cursor: pointer;
 transition: all 0.3s ease;
}

.cbx:hover {
 border-color: #0b76ef;
}

.flip {
 display: block;
 transition: all 0.4s ease;
 transform-style: preserve-3d;
 position: relative;
 width: 20px;
 height: 20px;
}
.fxk{
	margin: 30px;
	position: absolute;
}
#cbx {
 display: none;
 
}

#cbx:checked + .cbx {
 border-color: #0b76ef;
}

#cbx:checked + .flip {
 transform: rotateY(180deg);
}

.front,
.back {
 backface-visibility: hidden;
 position: absolute;
 top: 0;
 left: 0;
 width: 20px;
 height: 20px;
 border-radius: 2px;
}

.front {
 background: #fff;
 z-index: 1;
}

.back {
 transform: rotateY(180deg);
 background: #0b76ef;
 text-align: center;
 color: #fff;
 line-height: 20px;
 box-shadow: 0 0 0 1px #0b76ef;
}

.back svg {
 margin-top: 3px;
 fill: none;
}

.back svg path {
 stroke: #fff;
 stroke-width: 2.5;
 stroke-linecap: round;
 stroke-linejoin: round;
}
.dsb{
	height: 20px;
	float: left;
	width: 500px;
	margin-top: 20px;
}
.xyb: {
	width: 600px;
	float: right;
	margin-right: 50px;
	color: #00aaff;
	position: absolute;
	
}
a{
	text-decoration: none;
}
